import React, { useState } from 'react';
import log from 'loglevel';

log.setLevel('debug');
export default function () {
  const [isOpen, setIsOpen] = useState(false);
  const [logMessages, setLogMessages] = useState([]);

  const togglePanel = () => setIsOpen(!isOpen);

  const handleTestLog = () => {
    const message = '这是一个测试日志信息。';
    log.debug(message); // 使用loglevel记录日志
    setLogMessages((prev) => [...prev, message]);
  };

  return (
    <div>
      <button onClick={togglePanel} style={{ position: 'fixed', bottom: 20, right: 20 }}>
        {isOpen ? '关闭调试面板' : '打开调试面板'}
      </button>

      {isOpen && (
        <div
          style={{
            position: 'fixed',
            bottom: 70,
            right: 20,
            backgroundColor: '#fff',
            border: '1px solid #ccc',
            padding: '10px',
            boxShadow: '0 0 10px rgba(0,0,0,0.2)',
          }}
        >
          <h3>调试面板</h3>
          <button onClick={handleTestLog}>记录测试日志</button>
          <div>
            <h4>日志:</h4>
            <pre>{logMessages.join('\n')}</pre>
          </div>
        </div>
      )}
    </div>
  );
}
